<template>
  <div class="con-box integral">
    <div class="uc-nav">
      <div class="nav-box">
        <div
          :class="['nav-item', sts == 0 ? 'active' : '']"
          @click="changeTab(0)"
        >
          <span class="text">{{$t('myPoints.pointBreakdown')}}</span>
          <i class="line"></i>
        </div>
        <div
          :class="['nav-item', sts == 1 ? 'active' : '']"
          @click="changeTab(1)"
        >
          <span class="text">{{$t('myPoints.redeemingGoods')}}</span>
          <i class="line"></i>
        </div>
        <div
          :class="['nav-item', sts == 2 ? 'active' : '']"
          @click="changeTab(2)"
        >
          <span class="text">{{$t('myPoints.commonProblems')}}</span>
          <i class="line"></i>
        </div>
      </div>
    </div>
    <div class="uc-serach">
      <div class="left">
        <div class="current-integral">
          {{$t('myPoints.currentPoints')}}：
          <span class="number">{{ scoreInfo.score }}</span>
        </div>
        <div class="expired-integral">
          {{$t('myPoints.expiredPoints')}}：
          <span class="number">{{ scoreInfo.expireScore }}</span>
          <span class="integral-des"
            >{{$t('myPoints.pointsTips1')}}{{
              scoreInfo.expireYear
            }}{{$t('myPoints.pointsTips2')}}</span
          >
        </div>
      </div>
      <div class="right">
        <nuxt-link to="/member-center/integral-mall" class="search"
          >{{$t('myPoints.redeem')}}</nuxt-link
        >
      </div>
    </div>
    <!-- 积分明细 -->
    <div class="integral-detail" v-if="sts == 0">
      <table
        cellspacing="0"
        cellpadding="0"
        class="box"
        v-if="scoreDetList.length"
      >
        <tbody>
          <tr class="box-tit">
            <th>{{$t('myPoints.sourceUse')}}</th>
            <th width="400">{{$t('myPoints.pointsChange')}}</th>
            <th>{{$t('myPoints.Time')}}</th>
          </tr>
          <tr class="box-hd" v-for="(item, index) in scoreDetList" :key="index">
            <td>
              <div class="text" v-if="item.source == 0 && item.ioType == 1">
                {{$t('myPoints.sourceUseTips1')}}
              </div>
              <div class="text" v-if="item.source == 1 && item.ioType == 0">
                {{$t('myPoints.sourceUseTips2')}}
              </div>
              <div class="text" v-if="item.source == 1 && item.ioType == 1">
                {{$t('myPoints.sourceUseTips3')}}（{{$t('myPoints.orderNumber')}}：{{ item.bizId }}）
              </div>
              <div class="text" v-if="item.source == 2">{{$t('myPoints.sourceUseTips4')}}</div>
              <div class="text" v-if="item.source == 3">{{$t('myPoints.sourceUseTips5')}}</div>
              <div class="text" v-if="item.source == 4 && item.ioType == 0">
                {{$t('myPoints.sourceUseTips6')}}（{{$t('myPoints.orderNumber')}}：{{ item.bizId }}）
              </div>
              <div class="text" v-if="item.source == 4 && item.ioType == 1">
                {{$t('myPoints.sourceUseTips7')}}
              </div>
              <div class="text" v-if="item.source == 5 && item.ioType == 0">
                {{$t('myPoints.sourceUseTips8')}}
              </div>
              <div class="text" v-if="item.source == 6">{{$t('myPoints.sourceUseTips9')}}</div>
              <div class="text" v-if="item.source == 7">{{$t('myPoints.sourceUseTips10')}}</div>
            </td>
            <td>
              <div class="integral-change" v-if="item.ioType == 0">
                -{{ item.score }}
              </div>
              <div class="integral-change add" v-if="item.ioType == 1">
                +{{ item.score }}
              </div>
            </td>
            <td>
              <div class="time">{{ item.createTime }}</div>
            </td>
          </tr>
        </tbody>
      </table>
      <!-- 页码 -->
      <pagination
        v-model="scoreCurrent"
        :pages="scorePages"
        @changePage="getScoreDet"
      ></pagination>
      <!-- /页码 -->
    </div>
    <!-- /积分明细 -->

    <!-- 兑换商品 -->
    <div class="goods-list integral-exchange" v-if="sts == 1">
      <div class="list-con">
        <div
          class="item"
          v-for="item in scroeList"
          :key="item.prodId"
          @click="toScoreProdDet(item.prodId)"
        >
          <div class="goods-img">
            <img :src="item.pic" alt />
          </div>
          <div class="goods-msg">
            <div class="goods-name">{{ item.prodName }}</div>
            <div class="goods-price">
              <div class="icon">
                <img src="~/assets/images/memberPic/integral-icon.png" alt />
              </div>
              <div class="integral-price">{{ item.scorePrice }} {{$t('myPoints.points')}}</div>
              <div class="add" v-if="item.price > 0">+</div>
              <div class="price" v-if="item.price > 0">￥{{ item.price }}</div>
            </div>
            <div class="old-price">{{$t('myPoints.marketPrice')}}￥{{ item.oriPrice }}</div>
          </div>
        </div>
      </div>
      <!-- 商品列表为空 -->
      <div class="empty" v-if="!scroeList.length">
        <div class="img">
          <img src="~/assets/images/emptyPic/not-found.png" alt />
        </div>
        <div class="action">
          <div class="text">{{$t('sorryNoRelatedProducts')}}</div>
          <a href="/list" class="btn">{{$t('lookAtOther')}}</a>
        </div>
      </div>
      <!-- 商品列表为空 -->
      <!-- 页码 -->
      <pagination
        v-model="prodCurrent"
        :pages="prodPages"
        @changePage="getScoreProdList"
      ></pagination>
      <!-- /页码 -->
    </div>
    <!-- /兑换商品 -->

    <!-- 常见问题 -->
    <div class="detaile-qa" v-if="sts == 2">
      <div class="integral-qa-tit">{{$t('myPoints.pointsFAQ')}}</div>
      <div class="integral-qa-content" v-html="scoreQuestion.paramValue"></div>
    </div>
    <!-- /常见问题 -->
  </div>
</template>

<script>
import Pagination from '~/components/pagination'
export default {
  components: {
    Pagination
  },
  data () {
    return {
      scoreInfo: {},  //积分中心信息
      scoreDet: {}, //积分明细
      scoreDetList: [], // 积分明细列表
      scroeList: [],  //积分商品列表
      sts: 0,  //tab状态
      scoreQuestion: {}, //积分常见问题

      //积分明细
      scoreCurrent: 1,
      scorePages: 1, // 总页数
      scoreSize: 10,

      //积分商品列表
      prodCurrent: 1,
      prodPages: 1, // 总页数
      prodSize: 12,
    }
  },

  mounted () {
    // 设置网页标题
    document.title = this.$i18n.t('myPoints.myPoints')
    //积分中心信息
    this.$axios.get('/p/score/scoreInfo').then(({ data }) => {
      this.scoreInfo = data
    })

    // this.sts = sts  //0积分明细 1兑换商品
    // if (this.sts == 0) {
    // } else if (this.sts == 1) {
    // }

    //获取积分明细
    this.getScoreDet()

  },

  methods: {

    //获取积分明细
    getScoreDet () {
      let params = {
        current: this.scoreCurrent,
        size: this.scoreSize,
      }
      this.$axios.get('/p/score/page', { params }).then(({ data }) => {
        this.scoreDetList = data.records
        this.scorePages = data.pages
        this.scoreCurrent = data.current
      })
    },

    //获取积分商品列表
    getScoreProdList () {
      let params = {
        current: this.prodCurrent,
        size: this.prodSize,
      }
      this.$axios.get('/p/score/prodScorePage', { params }).then(({ data }) => {
        this.scroeList = data.records
        this.prodPages = data.pages
        this.prodCurrent = data.current
      })
    },

    // 获取积分常见问题
    getScoreQuestion () {
      this.$axios.get('/p/score/getScoreQuestion').then(({ data }) => {
        this.scoreQuestion = data
      })
    },

    //切换tab
    changeTab (sts) {
      this.sts = sts  //0积分明细 1兑换商品
      this.current = 1
      this.pages = 1
      if (sts == 0) {
        this.getScoreDet()
      } else if (sts == 1) {
        this.getScoreProdList()
      } else {
        this.getScoreQuestion()
      }
    },

    // 跳转到积分商品详情
    toScoreProdDet (prodId) {
      this.$axios.get('/p/score/prodScorePage').then(({ data }) => {
        this.$router.push({ path: '/member-center/integral-det/' + prodId })
      })
    }

  }

}
</script>

<style scoped src='~/assets/css/uc-integral.css'></style>
<style scoped src='~/assets/css/user-center.css'></style>
